import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';

class OwlVirtualHover3D extends PolymerElement {


    constructor(){

        super();
    }

    ready(){

        super.ready();

        if(this.position=="right"){

            this.$._hoverBox.className="hoverBox_p";

        }
        let domlist=this.shadowRoot.querySelector("#_slot").assignedNodes({flatten:false});
        let target=domlist[1];
        let parentnode=this.shadowRoot.querySelector("#_pnode");
        parentnode.removeChild(this.shadowRoot.querySelector("#_slot"));

        for(let i=0;i<=3;i++){
            let node=target.cloneNode(true);
            parentnode.appendChild(node);
        }
    }
    

    connectedCallback(){

        super.connectedCallback();


    }
    disconnectedCallback(){
        super.disconnectedCallback();

    }
    static get properties() { return {

       position:{

           type:String,
           value:"left"

       }
    }};


    static get template() {
        return html`
    
          <style>
              .hoverBox{
              
                 width: 280px;
                 height: 500px;
                 background-color: rgba(0,0,0,0.1);
                 position: relative;
                 transform: rotate(-30deg) skew(25deg) scale(0.8);
                 transition: all 0.5s;    
              
              }
             #_slot::slotted(*){
             
                 width: 100%;
                 position: absolute;
                 height: 100%;
                 transition: all 0.5s;
                 border-radius: 2px;
             }
             
             .hoverBox:hover #_pnode *:nth-child(4){
             
               transform: translate(160px,-160px);
               opacity: 1;
             }  
             
             .hoverBox:hover #_pnode *:nth-child(3){
             
               transform: translate(120px,-120px);
               opacity: 0.8;
             }  
             
             .hoverBox:hover #_pnode *:nth-child(2){
             
               transform: translate(80px,-80px);
               opacity: 0.6;
             }  
             
               .hoverBox:hover #_pnode *:nth-child(1){
             
               transform: translate(40px,-40px);
                opacity: 0.4;
             }  
             
             
                .hoverBox_p{
              
                 width: 280px;
                 height: 500px;
                 background-color: rgba(0,0,0,0.2);
                 position: relative;
                 transform: rotate(30deg) skew(-25deg) scale(0.8);
                 transition: all 0.5s;    
              
              }
             
             
             .hoverBox_p:hover #_pnode *:nth-child(4){
             
               transform: translate(-160px,-160px);
               opacity: 1;
             }  
             
             .hoverBox_p:hover #_pnode *:nth-child(3){
             
               transform: translate(-120px,-120px);
               opacity: 0.8;
             }  
             
             .hoverBox_p:hover #_pnode *:nth-child(2){
             
               transform: translate(-80px,-80px);
               opacity: 0.6;
             }  
             
               .hoverBox_p:hover #_pnode *:nth-child(1){
             
               transform: translate(-40px,-40px);
                opacity: 0.4;
             }  
             
             
             #_pnode{
             
                width: 100%;
                height: 100%;   
         
             }
             
             #_pnode *{
                 width: 100%;
                 position: absolute;
                 height: 100%;
                 transition: all 0.5s;
                 border-radius: 2px;
             
             }
            
          </style>
   
           <div class="hoverBox" id="_hoverBox">
           <div id="_pnode">
             <slot id="_slot"></slot>
           </div>
           </div>
        `;
    }

}

customElements.define("owl-virtual-hover3d",OwlVirtualHover3D);